<template>
  <div
    role="tooltip"
    aria-hidden="true"
    class="van_popover van_popper popover_channe"
    tabindex="0"
    style="
      transform-origin: center top;
      z-index: 2015;
      display: absolute;
      left: 24px;
    "
  >
    <div class="channel_menu_mini">
      <div class="box l_box">
        <a href="//www.bilibili.com/v/douga/" target="_blank">
          <span class="name">
            <i class="iconfont">动画</i>
            动画
          </span>
          <span class="count">1849</span>
        </a>
        <a href="//www.bilibili.com/anime/" target="_blank">
          <span class="name">
            <i class="iconfont">番剧</i>
            番剧
          </span>
          <span class="count">56</span>
        </a>
        <a href="//www.bilibili.com/guochuang/" target="_blank">
          <span class="name">
            <i class="iconfont">国创</i>
            国创
          </span>
          <span class="count">145</span>
        </a>
        <a href="//www.bilibili.com/v/music/" target="_blank"
          ><span class="name">
            <i class="iconfont">音乐</i>
            音乐
          </span>
          <span class="count">2627</span>
        </a>
        <a href="//www.bilibili.com/v/dance/" target="_blank">
          <span class="name">
            <i class="iconfont">舞蹈</i>
            舞蹈
          </span>
          <span class="count">435</span>
        </a>
        <a href="//www.bilibili.com/v/game/" target="_blank">
          <span class="name">
            <i class="iconfont">游戏</i>
            游戏
          </span>
          <span class="count">22987</span>
        </a>
        <a href="//www.bilibili.com/v/knowledge/" target="_blank">
          <span class="name">
            <i class="iconfont">知识</i>
            知识
          </span>
          <span class="count">4713</span>
        </a>
        <a href="//www.bilibili.com/v/tech/" target="_blank">
          <span class="name">
            <i class="iconfont">科技</i>
            科技
          </span>
          <span class="count">811</span>
        </a>
        <a href="//www.bilibili.com/v/sports/" target="_blank">
          <span class="name">
            <i class="iconfont">运动</i>
            运动
          </span>
          <span class="count">1440</span>
        </a>
        <a href="//www.bilibili.com/v/car/" target="_blank">
          <span class="name">
            <i class="iconfont">汽车</i>
            汽车
          </span>
          <span class="count">689</span>
        </a>
        <a href="//www.bilibili.com/v/life/" target="_blank">
          <span class="name">
            <i class="iconfont">生活</i>
            生活
          </span>
          <span class="count">16217</span>
        </a>
        <a href="//www.bilibili.com/v/food/" target="_blank">
          <span class="name">
            <i class="iconfont">美食</i>
            美食
          </span>
          <span class="count">1088</span>
        </a>
        <a href="//www.bilibili.com/v/animal/" target="_blank">
          <span class="name">
            <i class="iconfont">动物圈</i>
            动物圈
          </span>
          <span class="count">1358</span>
        </a>
        <a href="//www.bilibili.com/v/kichiku/" target="_blank">
          <span class="name">
            <i class="iconfont">鬼畜</i>
            鬼畜
          </span>
          <span class="count">146</span>
        </a>
        <a href="//www.bilibili.com/v/fashion/" target="_blank">
          <span class="name">
            <i class="iconfont">时尚</i>
            时尚
          </span>
          <span class="count">751</span>
        </a>
        <a href="//www.bilibili.com/v/information/" target="_blank">
          <span class="name">
            <i class="iconfont">资讯</i>
            资讯
          </span>
          <span class="count">52</span>
        </a>
        <a href="//www.bilibili.com/v/ent/" target="_blank">
          <span class="name">
            <i class="iconfont">娱乐</i>
            娱乐
          </span>
          <span class="count">2355</span>
        </a>
        <a href="//www.bilibili.com/v/cinephile/" target="_blank">
          <span class="name">
            <i class="iconfont">影视</i>
            影视
          </span>
          <span class="count">2634</span>
        </a>
        <a href="//www.bilibili.com/cinema/" target="_blank">
          <span class="name">
            <i class="iconfont">放映厅</i>
            放映厅
          </span>
          <span class="count">31</span>
        </a>
      </div>
      <div class="box r_box">
        <a href="//www.bilibili.com/read/home" target="_blank">
          <span class="name">
            <i class="iconfont">专栏</i>
            专栏
          </span>
        </a>
        <a href="//live.bilibili.com" target="_blank">
          <span class="name">
            <i class="iconfont">直播</i>
            直播
          </span>
        </a>
        <a
          href="//www.bilibili.com/blackboard/activity-list.html"
          target="_blank"
        >
          <span class="name">
            <i class="iconfont">活动</i>
            活动
          </span>
        </a>
        <a href="//www.bilibili.com/cheese/" target="_blank">
          <span class="name">
            <i class="iconfont">课堂</i>
            课堂
          </span>
        </a>
        <a
          href="https://www.bilibili.com/blackboard/activity-5zJxM3spoS.html"
          target="_blank"
        >
          <span class="name">
            <i class="iconfont">社区中心</i>
            社区中心
          </span>
        </a>
        <a href="//www.bilibili.com/v/musicplus/" target="_blank">
          <span class="name">
            <i class="iconfont">新歌热榜</i>
            新歌热榜
          </span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss">
.van_popover.van_popper.popover_channe {
  padding: 0;
  top: 45px !important;
  box-shadow: none;
  border: none;
}
.popover_channe {
  padding: 0;
  width: 670px;
  height: 372px;
  background-color: transparent;
}
.channel_menu_mini {
  padding: 10px 5px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  width: 670px;
  height: 462px;
  display: flex;
  text-align: left;
  .box {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    a {
      display: flex;
      justify-content: space-between;
      box-sizing: content-box;
      width: 172px;
      height: 24px;
      line-height: 24px;
      padding: 10px 20px !important;
      color: #212121;
      border-radius: 4px;
      font-size: 14px;
      transition: all 0.3s;
      &:hover {
        color: #212121;
        background-color: #f4f4f4;
      }
    }
    .name {
      .iconfont {
        margin-right: 10px;
      }
    }
    .count {
      color: #999;
    }
  }
  .l_box {
    flex: 2;
  }
  .r_box {
    flex: 1;
    padding-left: 5px;
    border-left: 1px solid #e7e7e7;
  }
}
</style>